<template>
	<view class="page flex-col">
		<view class="group_1 flex-col">
			<view class="section_1 flex-col" :style="{backgroundImage:'url('+msg.url+')'}">
				<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)">
					<!-- <image
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/19f67f888aea03210abbc453934618092dbd70d9.png"
						class="label_7"></image> -->
					<image
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/77b675f050035c3e11ac66d704ef4ff16c5728b3.png"
						class="label_8" @click="dropdownclick"></image>
					<image
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/1db9d6facb00ba2519d7b14a395f49a9ae9eb1ac.png"
						class="label_6"></image>
				</QSNavbar>
				<!-- <nav-bar title="财务收入" :color="navBarColor" :bg="navBarBg" /> -->

			</view>
			<view class="group_list">
				<view class="group_10">
					<view class="box_7">
						<text lines="1" class="text_1">锅里岩</text>
						<view class="block_2">
							<image
								src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/3805fdb68e2475d657714a94edeb6ad59e124b7b.png"
								class="thumbnail_1"></image>
							<text lines="1" class="text_18">5.0</text>
							<view class="text-wrapper_5">
								<text lines="1" class="text_19">餐饮</text>
							</view>
							<text lines="1" class="text_20">月售500+</text>
						</view>
					</view>
					<image
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/845389c76e7e0c5af4a3765a9a575600dd89e737.png"
						class="image_6"></image>
				</view>
				<view class="group_11" v-if="wrapper_if">
					<text lines="1" class="text_21">欢迎光临锅里岩~,如果您在订餐过程中有任何已问，可第一可第一可第一可第一</text>
					<image @click="wrapper_list"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/adef1110b5f4a265e93e49578d231d2d6f749e46.png"
						class="label_1"></image>
				</view>
			</view>
			<view class="coc_add" v-if="wrapper_if">
				<scroll-view scroll-x="true">
					<view class="list_1">
						<view class="image-text_14-0" v-for="(item,index) in fieldlist" :key="index"
							@click='fieldclicks(item,index)'>
							<view class="date-item" :class="{ active: dateActivs === index }">
								<image v-if="dateActivs === index" :src="item.img_s" class="image_19-0"></image>
								<image v-else :src="item.img" class="image_19-0"></image>
							</view>
							<view class="actives" v-if="dateActivs === index">{{item.name}}</view>
							<view class="text-group_14-0" v-else>{{item.name}}</view>
						</view>
					</view>
				</scroll-view>
				<scroll-view scroll-y="true" style="width: 100%;
    height: 60vh;
    overflow: hidden;">
					<view class="section_2">
						<view class="block_7">
							<view class="group_16" v-for="(item,index) in commodity" :key="index" v-if="index%2 == 0"
								@click="productclick(item,index)">
								<view class="image-text_33">
									<image
										src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/469bedc1ebe632f58719e61a573e6c1d5480578f.png"
										class="image_38"></image>
									<view class="block_8">
										<view class="text-wrapper_4">
											<text lines="1" class="text_8">免</text>
										</view>
										<text lines="1" class="text-group_15">辣子鸡</text>
									</view>
								</view>
								<view class="box_22">
									<view class="text-wrapper_5">
										<price :value="item.price" :color="'#ff4105'"></price>
									</view>
									<text lines="1" class="text_12"
										style="text-decoration: line-through;">¥200.00</text>
									<text lines="1" class="text_12">已售288</text>
								</view>
							</view>

						</view>
						<view class="block_9">
							<view class="group_16_s" v-for="(item,index) in commodity" :key="index" v-if="index%2 != 0"
								@click="productclick(item,index)">
								<view class="image-text_as">
									<image
										src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/469bedc1ebe632f58719e61a573e6c1d5480578f.png"
										class="image_38" style="height: 400rpx;"></image>
									<view class="block_8">
										<view class="text-wrapper_4">
											<text lines="1" class="text_8">免</text>
										</view>
										<text lines="1" class="text-group_15">辣子鸡</text>
									</view>
								</view>
								<view class="box_22">
									<view class="text-wrapper_5">
										<price :value="item.price" :color="'#ff4105'"></price>
									</view>
									<text lines="1" class="text_12"
										style="text-decoration: line-through;">¥200.00</text>
									<text lines="1" class="text_12">已售288</text>
								</view>
							</view>

						</view>
					</view>
				</scroll-view>
			</view>
			<view class="gradient-wrapper" v-if="wrapper_else">
				<view class="box_4">
					<text lines="1" class="text_4">优惠</text>
					<image @click="wrapper_list1"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/e858664c3456efb0ae934e907f16c7bf4e66ddfc.png"
						class="thumbnail_2"></image>
				</view>
				<view class="box_5">
					<view class="text-wrapper_2">
						<text lines="1" class="text_5">惠</text>
					</view>
					<text lines="1" class="text_6">全场半价起</text>
				</view>
				<view lines="1" class="text_7">商家服务</view>
				<view class="box_6">
					<view class="image-text_2">
						<image
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/450d8f56bc3b15aacc01b71168b9c44dfbdfb320.png"
							class="label_4"></image>
						<text lines="1" class="text-group_2">五星店铺</text>
					</view>
					<image
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/21ad93750a07062077ce0241cbaf73f218cdb8e5.png"
						class="image_6"></image>
					<view class="image-text_3">
						<image
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f8d22aff893879e5cad6215d8db0996d46435983.png"
							class="label_5"></image>
						<text lines="1" class="text-group_3">放心购</text>
					</view>
					<image
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/21ad93750a07062077ce0241cbaf73f218cdb8e5.png"
						class="image_7"></image>
					<view class="image-text_4">
						<image
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/b2f640f52205b842e1a19e4f8f9cac3c3bbce04a.png"
							class="label_6"></image>
						<text lines="1" class="text-group_4">七天无理由退</text>
					</view>
				</view>
				<view lines="1" class="text_8">公告</view>
				<view lines="1" class="paragraph_1">欢迎光临锅里岩~,如果您在订餐过程中有任何已问，可第一时间联系我们。</view>
			</view>
		</view>

		<view class="cons_contenter" v-if="dropdownmenu" @click="dropdownmenulist"></view>
		<view class="cons_con" v-if="dropdownmenu">
			<view class="" style="margin-top: 17%;">
				<view class="cons_con_contenter" v-for="(item,index) in droplist" :key="index"
					@click='fieldclick(item,index)'>
					<view class="date-item_left">
						<view class="actives" v-if="dateActive === index">{{item.name}}</view>
						<view class="text-group_14-0" v-else>{{item.name}}</view>
					</view>
					<!-- <view class="date-item_right">
						<image v-if="dateActive === index" :src="item.img" class="image_19-0"></image>
					</view> -->


				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	const market = require("@/api/market/index.js");
	export default {
		components: {
			QSNavbar
		},
		data() {
			return {
				msg: {
					url: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/3fa27cc8abb72d0490b503562241b228ef3d954c.png',
				},
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "left",
						width: 15,
						doEvent: "back",
						iconColor: "#fff",
					},
					{
						type: "text",
						text: "",
						width: 70,
						weight: "bold",
						color: "#fff",
						textAlign: "left",
					},
				],
				wrapper_if: true,
				wrapper_else: false,
				commodity: [{
					name_s: '免',
					name: '辣子鸡',
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/469bedc1ebe632f58719e61a573e6c1d5480578f.png',
					img_s: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/469bedc1ebe632f58719e61a573e6c1d5480578f.png',
					price: '100',
					yishou: '288'
				}, {
					name: '辣子鸡',
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/469bedc1ebe632f58719e61a573e6c1d5480578f.png',
					img_s: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/469bedc1ebe632f58719e61a573e6c1d5480578f.png',
					price: '100',
					yishou: '288',
					huaxian: '200'
				}, {
					name: '辣子鸡',
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/469bedc1ebe632f58719e61a573e6c1d5480578f.png',
					img_s: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/469bedc1ebe632f58719e61a573e6c1d5480578f.png',
					price: '100',
					yishou: '288'
				}, {
					name: '辣子鸡',
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/469bedc1ebe632f58719e61a573e6c1d5480578f.png',
					img_s: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/469bedc1ebe632f58719e61a573e6c1d5480578f.png',
					price: '100',
					yishou: '288',
					huaxian: '200'
				}, {
					name: '辣子鸡',
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/469bedc1ebe632f58719e61a573e6c1d5480578f.png',
					img_s: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/469bedc1ebe632f58719e61a573e6c1d5480578f.png',
					price: '100',
					yishou: '288'
				}, {
					name: '辣子鸡',
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/469bedc1ebe632f58719e61a573e6c1d5480578f.png',
					img_s: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/469bedc1ebe632f58719e61a573e6c1d5480578f.png',
					price: '100',
					yishou: '288',
					huaxian: '200'
				}],
				fieldlist: [{
					name: '分类',
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/10d77751b1e9530750ac358d6bfd688cccae99b2.png',
					img_s: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/860e2ac9ea03d4431c90e74f81fb34e798b29f43.png',
				}, {
					name: '分类',
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/10d77751b1e9530750ac358d6bfd688cccae99b2.png',
					img_s: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/860e2ac9ea03d4431c90e74f81fb34e798b29f43.png',
				}, {
					name: '分类',
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/10d77751b1e9530750ac358d6bfd688cccae99b2.png',
					img_s: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/860e2ac9ea03d4431c90e74f81fb34e798b29f43.png',
				}, {
					name: '分类',
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/10d77751b1e9530750ac358d6bfd688cccae99b2.png',
					img_s: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/860e2ac9ea03d4431c90e74f81fb34e798b29f43.png',
				}, {
					name: '分类',
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/10d77751b1e9530750ac358d6bfd688cccae99b2.png',
					img_s: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/860e2ac9ea03d4431c90e74f81fb34e798b29f43.png',
				}, {
					name: '分类',
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/10d77751b1e9530750ac358d6bfd688cccae99b2.png',
					img_s: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/860e2ac9ea03d4431c90e74f81fb34e798b29f43.png',
				}],
				dateActive: "",
				droplist: [{
					name: '价格由低到高',
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/26d8a9fada06c95955c8ba81836aa4d8b927c35f.png',
				}, {
					name: '价格由高到低',
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/26d8a9fada06c95955c8ba81836aa4d8b927c35f.png',
				}, {
					name: '销量排序',
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/26d8a9fada06c95955c8ba81836aa4d8b927c35f.png',
				}],
				dropdownmenu: false,
				dateActive: '',
				dateActivs: ''
			};
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '领券中心'
			});

		},
		methods: {
			productclick(){
				uni.navigateTo({
					url:'./commodity_product'
				})
			},
			// 蒙版关闭
			dropdownmenulist() {
				this.dropdownmenu = false
			},
			// 打开蒙版/选择
			dropdownclick() {
				this.dropdownmenu = true
			},
			// 分类点击
			fieldclick(item, index) {
				this.dateActive = index
				setTimeout(() => {
					this.dropdownmenu = false
				}, 200)
			},
			// 分类点击
			fieldclicks(item, index) {
				console.log(item, index, '999966666')
				this.dateActivs = index
			},
			wrapper_list() {
				this.wrapper_if = false
				this.wrapper_else = true
			},
			wrapper_list1() {
				this.wrapper_if = true
				this.wrapper_else = false
			}
		}
	};
</script>
<style lang='scss'>
	@import '../static/css/common/common.scss';

	.page {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;

		.cons_contenter {
			position: absolute;
			animation-duration: 0.2s;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 998;
			background-color: rgba(0, 0, 0, 0.7);
			transition: opacity 0.3s;
		}

		.cons_con {
			position: absolute;
			animation-duration: 0.2s;
			width: 80%;
			height: 470rpx;
			top: 30%;
			left: 10%;
			z-index: 999;
			background-color: #fff;
			transition: opacity 0.3s;
			border-radius: 10rpx;

			.cons_con_contenter {
				width: 90%;
				height: 80rpx;
				border-bottom: 1rpx #e5e5e5 solid;
				margin-left: 5%;
				line-height: 80rpx;
			}

			.date-item_right {
				color: #e5e5e5;
				float: right;
			}

			.date-item_left {
				/* float: left; */
				text-align: center;
			}

			.image_19-0 {
				width: 30rpx;
				height: 30rpx;
				margin-top: 25rpx;
				margin-left: 30rpx;
			}

			.actives {
				color: #886cff;
				font-size: 28rpx;
				text-align: center;
				margin: 20rpx 0 0 0rpx;
			}

			.text-group_14-0 {
				color: rgba(51, 51, 51, 1);
				font-size: 28rpx;
				text-align: center;
				margin: 20rpx 0 0 0rpx;
			}

		}

		.group_1 {

			.section_1 {
				width: 100%;
				height: 233rpx;
				/* background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/db045cf0ad6b81e81da1b311140698a7ca920b91.png') 100% no-repeat; */
				background-size: 100% 100%;

				.label_7 {
					position: absolute;
					right: 340rpx;
					width: 36rpx;
					height: 36rpx;
					z-index: 99;
				}

				.label_8 {
					position: absolute;
					right: 275rpx;
					width: 36rpx;
					height: 36rpx;
					z-index: 99;
				}

				.label_6 {
					position: absolute;
					right: 210rpx;
					width: 36rpx;
					height: 36rpx;
					z-index: 99;
				}

				.image_1 {
					width: 654rpx;
					height: 206rpx;
					margin: 33rpx 0 0 48rpx;
				}

			}

			.group_list {
				width: 100%;
				height: 100%;
				border-radius: 25rpx 25rpx 0 0;
				background-color: #ffffff;
				margin-top: -10rpx;

				.group_10 {
					width: 100%;
					height: 123rpx;
					flex-direction: row;
					display: flex;
					margin: 0rpx 0 0 30rpx;
				}

				.box_7 {
					width: 131rpx;
					height: 80rpx;
					margin-top: 43rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}

				.text_1 {
					width: 100%;
					height: 38rpx;
					overflow-wrap: break-word;
					color: rgba(51, 51, 51, 1);
					font-size: 40rpx;
					font-family: PingFang-SC-Medium;
					font-weight: 600;
					text-align: left;
					white-space: nowrap;
					line-height: 34rpx;
				}

				.block_2 {
					width: 130rpx;
					height: 28rpx;
					flex-direction: row;
					display: flex;
					margin: 14rpx 0 0 1rpx;
				}

				.thumbnail_1 {
					width: 20rpx;
					height: 20rpx;
					margin-top: 4rpx;
				}

				.text_18 {
					width: 31rpx;
					height: 17rpx;
					overflow-wrap: break-word;
					color: rgba(255, 132, 0, 1);
					font-size: 22rpx;
					font-family: PingFang-SC-Medium;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 24rpx;
					margin: 5rpx 0 0 6rpx;
				}

				.text-wrapper_5 {
					background-color: rgba(255, 255, 255, 1.000000);
					border-radius: 3rpx;
					height: 28rpx;
					border: 1px solid rgba(255, 132, 0, 1);
					margin-left: 9rpx;
					display: flex;
					flex-direction: column;
					width: 64rpx;
				}

				.text_19 {
					width: 43rpx;
					height: 21rpx;
					overflow-wrap: break-word;
					color: rgba(255, 132, 0, 1);
					font-size: 22rpx;
					font-family: PingFang-SC-Medium;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 21rpx;
					margin: 3rpx 3px 0 8rpx;
				}

				.text_20 {
					width: 31rpx;
					height: 17rpx;
					overflow-wrap: break-word;
					color: rgba(153, 153, 153, 1);
					font-size: 22rpx;
					font-family: PingFang-SC-Medium;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 24rpx;
					margin: 5rpx 0 0 6rpx;

				}

				.image_6 {
					width: 110rpx;
					height: 110rpx;
					margin-left: 60%;
					margin-top: -20rpx;
				}

				.group_11 {
					width: 688rpx;
					height: 40rpx;
					flex-direction: row;
					display: flex;
					justify-content: space-between;
					margin: 14rpx 0 0 32rpx;
				}

				.text_21 {
					width: 583rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					height: 40rpx;
					color: rgba(153, 153, 153, 1);
					font-size: 22rpx;
					font-family: PingFang-SC-Medium;
					font-weight: 500;
					text-align: left;
					line-height: 40rpx;
				}

				.label_1 {
					width: 19rpx;
					height: 18rpx;
					margin-top: 10rpx;
				}
			}

			/* @keyframes wrapper-gradient {
			  0% {
			    transform: translateY(-100%);
			  }
			  100% {
			    transform: translateY(0);
			  }
			}
			@keyframes img-gradient {
			  0% {
			    transform: translateY(100%);
			  }
			  100% {
			    transform: translateY(0);
			  }
			} */
			.gradient-wrapper {
				display: inline-block;
				overflow: hidden;
				/* animation: wrapper-gradient 1s linear; */

				.box_4 {
					width: 690rpx;
					height: 30rpx;
					flex-direction: row;
					display: flex;
					justify-content: space-between;
					margin: 25rpx 0 0 30rpx;

					animation: img-gradient 1s linear;
				}

				.text_4 {
					width: 63rpx;
					height: 30rpx;
					overflow-wrap: break-word;
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					font-family: PingFang-SC-Medium;
					font-weight: 600;
					text-align: left;
					white-space: nowrap;
					line-height: 34rpx;
				}

				.thumbnail_2 {
					width: 19rpx;
					height: 18rpx;
				}

				.box_5 {
					width: 146rpx;
					height: 31rpx;
					flex-direction: row;
					display: flex;
					justify-content: space-between;
					margin: 30rpx 0 0 29rpx;
				}

				.text-wrapper_2 {
					background-color: rgba(255, 15, 15, 1.000000);
					border-radius: 31rpx;
					height: 31rpx;
					display: flex;
					flex-direction: column;
					width: 31rpx;
				}

				.text_5 {
					width: 21rpx;
					height: 21rpx;
					overflow-wrap: break-word;
					color: rgba(255, 255, 255, 1);
					font-size: 22rpx;
					font-family: PingFang-SC-Regular;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 21rpx;
					margin: 5rpx 0 0 5rpx;
				}

				.text_6 {
					width: 109rpx;
					height: 21rpx;
					overflow-wrap: break-word;
					color: rgba(51, 51, 51, 1);
					font-size: 22rpx;
					font-family: PingFang-SC-Medium;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 21rpx;
					margin-top: 5rpx;
				}

				.text_7 {
					width: 129rpx;
					height: 31rpx;
					overflow-wrap: break-word;
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					font-family: PingFang-SC-Medium;
					font-weight: 600;
					text-align: left;
					white-space: nowrap;
					line-height: 34rpx;
					margin: 59rpx 0 0 30rpx;
				}

				.box_6 {
					width: 446rpx;
					height: 23rpx;
					flex-direction: row;
					display: flex;
					margin: 30rpx 0 0 29rpx;
				}

				.image-text_2 {
					width: 114rpx;
					height: 21rpx;
					margin-top: 1rpx;
					flex-direction: row;
					display: flex;
					justify-content: space-between;
				}

				.label_4 {
					width: 21rpx;
					height: 21rpx;
				}

				.text-group_2 {
					width: 87rpx;
					height: 21rpx;
					overflow-wrap: break-word;
					color: rgba(51, 51, 51, 1);
					font-size: 22rpx;
					font-family: PingFang-SC-Medium;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 21rpx;
				}

				.image_6 {
					width: 1rpx;
					height: 21rpx;
					margin: 1rpx 0 0 19rpx;
				}

				.image-text_3 {
					width: 93rpx;
					height: 22rpx;
					flex-direction: row;
					display: flex;
					justify-content: space-between;
					margin: 1rpx 0 0 20rpx;
				}

				.label_5 {
					width: 23rpx;
					height: 22rpx;
				}

				.text-group_3 {
					width: 64rpx;
					height: 21rpx;
					overflow-wrap: break-word;
					color: rgba(51, 51, 51, 1);
					font-size: 22rpx;
					font-family: PingFang-SC-Medium;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 21rpx;
				}

				.image_7 {
					width: 1rpx;
					height: 21rpx;
					margin: 1rpx 0 0 20rpx;
				}

				.image-text_4 {
					width: 158rpx;
					height: 23rpx;
					margin-left: 20rpx;
					flex-direction: row;
					display: flex;
					justify-content: space-between;
				}

				.label_6 {
					width: 21rpx;
					height: 23rpx;
				}

				.text-group_4 {
					width: 131rpx;
					height: 21rpx;
					overflow-wrap: break-word;
					color: rgba(51, 51, 51, 1);
					font-size: 22rpx;
					font-family: PingFang-SC-Medium;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 21rpx;
					margin-top: 1rpx;
				}

				.text_8 {
					width: 63rpx;
					height: 30rpx;
					overflow-wrap: break-word;
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					font-family: PingFang-SC-Medium;
					font-weight: 600;
					text-align: left;
					white-space: nowrap;
					line-height: 34rpx;
					margin: 59rpx 0 0 30rpx;
				}

				.paragraph_1 {
					width: 676rpx;
					height: 56rpx;
					overflow-wrap: break-word;
					color: rgba(51, 51, 51, 1);
					font-size: 22rpx;
					font-family: PingFang-SC-Medium;
					font-weight: 500;
					text-align: left;
					line-height: 34rpx;
					margin: 29rpx 0 836rpx 32rpx;
				}
			}

			/* .gradient-wrapper>img {
			  animation: img-gradient 2s linear;
			} */
			.coc_add {
				.list_1 {
					width: 687rpx;
					height: 180rpx;
					flex-direction: row;
					display: flex;
					justify-content: space-between;
					margin: 30rpx 0 0 30rpx;
				}

				.image-text_14-0 {
					width: 96rpx;
					height: 140rpx;
					margin-right: 52rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.date-item {
						// padding: 20rpx 20rpx;
						width: 100rpx;
						height: 100rpx;
						border-radius: 50% 50%;
						background-color: #e5e5e5;
						color: #e5e5e5;
					}

					.active {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50% 50%;
						background-color: #886cff;
						color: #886cff;
					}

					.image_19-0 {
						width: 42rpx;
						height: 42rpx;
						margin-top: 25rpx;
						margin-left: 30rpx;
					}

					.actives {
						color: #886cff;
						font-size: 22rpx;
						text-align: left;
						margin: 10rpx 0 0 27rpx;
					}

					.text-group_14-0 {
						color: rgba(51, 51, 51, 1);
						font-size: 22rpx;
						text-align: left;
						margin: 10rpx 0 0 27rpx;
					}

				}

				/* // 下面商品 */

				.section_2 {
					width: 690rpx;
					// height: 1185rpx;
					flex-direction: row;
					display: flex;
					justify-content: space-between;
					margin: 0rpx 0 1rpx 30rpx;
				}

				.block_7 {
					width: 335rpx;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}

				.group_16 {
					background-color: rgba(255, 255, 255, 1.000000);
					border-radius: 10rpx;
					width: 335rpx;
					height: 420rpx;
					display: flex;
					flex-direction: column;
					margin-top: 30rpx;
				}

				.group_16_s {
					background-color: rgba(255, 255, 255, 1.000000);
					border-radius: 10rpx;
					width: 335rpx;
					height: 470rpx;
					display: flex;
					flex-direction: column;
					margin-top: 30rpx;
				}

				.image-text_33 {
					width: 335rpx;
					height: 371rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}

				.image-text_as {
					width: 335rpx;
					height: 420rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}

				.image_38 {
					width: 335rpx;
					height: 335rpx;
				}

				.block_8 {
					width: 116rpx;
					height: 28rpx;
					flex-direction: row;
					display: flex;
					justify-content: space-between;
					margin: 8rpx 0 0 10rpx;
				}

				.text-wrapper_4 {
					background-color: rgba(252, 75, 91, 1.000000);
					border-radius: 50%;
					height: 28rpx;
					display: flex;
					flex-direction: column;
					width: 28rpx;
				}

				.text_8 {
					width: 14rpx;
					height: 15rpx;
					overflow-wrap: break-word;
					color: rgba(255, 255, 255, 1);
					font-size: 18rpx;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 15rpx;
					margin: 7rpx 0 0 7rpx;
				}

				.text-group_15 {
					width: 78rpx;
					height: 25rpx;
					overflow-wrap: break-word;
					color: rgba(51, 51, 51, 1);
					font-size: 26rpx;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 34rpx;
					margin-top: 1rpx;
				}

				.box_22 {
					width: 323rpx;
					height: 21rpx;
					flex-direction: row;
					display: flex;
					justify-content: space-between;
					margin: 13rpx 0 14rpx 11rpx;
				}

				.text-wrapper_5 {
					width: 104rpx;
					height: 21rpx;
					overflow-wrap: break-word;
					font-weight: 700;
					text-align: left;
					white-space: nowrap;
					line-height: 39rpx;
				}

				.text_9 {
					width: 104rpx;
					height: 21rpx;
					overflow-wrap: break-word;
					color: rgba(255, 15, 15, 1);
					font-size: 28rpx;
					font-weight: 700;
					text-align: left;
					white-space: nowrap;
					line-height: 39rpx;
				}

				.text_10 {
					width: 104rpx;
					height: 21rpx;
					overflow-wrap: break-word;
					color: rgba(255, 15, 15, 1);
					font-size: 28rpx;
					font-weight: 700;
					text-align: left;
					white-space: nowrap;
					line-height: 39rpx;
				}

				.text_11 {
					width: 104rpx;
					height: 21rpx;
					overflow-wrap: break-word;
					color: rgba(255, 15, 15, 1);
					font-size: 22rpx;
					font-weight: 700;
					text-align: left;
					white-space: nowrap;
					line-height: 39rpx;
				}

				.text_12 {
					width: 81rpx;
					height: 30rpx;
					overflow-wrap: break-word;
					color: rgba(153, 153, 153, 1);
					font-size: 22rpx;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 45rpx;
				}

				.group_19 {
					background-color: rgba(255, 255, 255, 1.000000);
					border-radius: 10rpx;
					width: 335rpx;
					height: 409rpx;
					margin-top: 20rpx;
					flex-direction: row;
					display: flex;
				}

				.image-text_34 {
					width: 335rpx;
					height: 400rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}

				.image_39 {
					width: 335rpx;
					height: 335rpx;
				}

				.text-group_19 {
					width: 105rpx;
					height: 56rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin: 9rpx 0 0 10rpx;
				}

				.text_13 {
					width: 79rpx;
					height: 25rpx;
					overflow-wrap: break-word;
					color: rgba(51, 51, 51, 1);
					font-size: 26rpx;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 34rpx;
				}

				.text-wrapper_6 {
					width: 104rpx;
					height: 21rpx;
					overflow-wrap: break-word;
					font-weight: 700;
					text-align: left;
					white-space: nowrap;
					line-height: 39rpx;
					margin: 10rpx 0 0 1rpx;
				}

				.text_14 {
					width: 104rpx;
					height: 21rpx;
					overflow-wrap: break-word;
					color: rgba(255, 15, 15, 1);
					font-size: 28rpx;
					font-weight: 700;
					text-align: left;
					white-space: nowrap;
					line-height: 39rpx;
				}

				.text_15 {
					width: 104rpx;
					height: 21rpx;
					overflow-wrap: break-word;
					color: rgba(255, 15, 15, 1);
					font-size: 28rpx;
					font-weight: 700;
					text-align: left;
					white-space: nowrap;
					line-height: 39rpx;
				}

				.text_16 {
					width: 104rpx;
					height: 21rpx;
					overflow-wrap: break-word;
					color: rgba(255, 15, 15, 1);
					font-size: 22rpx;
					font-weight: 700;
					text-align: left;
					white-space: nowrap;
					line-height: 39rpx;
				}

				.text_17 {
					width: 81rpx;
					height: 21rpx;
					overflow-wrap: break-word;
					color: rgba(153, 153, 153, 1);
					font-size: 22rpx;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 34rpx;
					margin: 381rpx 1rpx 0 -82rpx;
				}

				.image_40 {
					width: 335rpx;
					height: 327rpx;
					margin-top: 20rpx;
				}

				.block_9 {
					width: 335rpx;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}

				.image_41 {
					width: 335rpx;
					height: 400rpx;
				}

				.text-group_20 {
					width: 105rpx;
					height: 56rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin: 9rpx 0 0 14rpx;
				}

				.text_18 {
					width: 78rpx;
					height: 25rpx;
					overflow-wrap: break-word;
					color: rgba(51, 51, 51, 1);
					font-size: 26rpx;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 34rpx;
				}

				.text-wrapper_7 {
					width: 104rpx;
					height: 21rpx;
					overflow-wrap: break-word;
					font-weight: 700;
					text-align: left;
					white-space: nowrap;
					line-height: 39rpx;
					margin: 10rpx 0 0 1rpx;


					width: 104rpx;
					height: 21rpx;
					overflow-wrap: break-word;
					font-weight: 700;
					text-align: left;
					white-space: nowrap;
					line-height: 39rpx;
				}

				.text_19 {
					width: 104rpx;
					height: 21rpx;
					overflow-wrap: break-word;
					color: rgba(255, 15, 15, 1);
					font-size: 28rpx;
					font-weight: 700;
					text-align: left;
					white-space: nowrap;
					line-height: 39rpx;
				}

				.text_20 {
					width: 104rpx;
					height: 21rpx;
					overflow-wrap: break-word;
					color: rgba(255, 15, 15, 1);
					font-size: 28rpx;
					font-weight: 700;
					text-align: left;
					white-space: nowrap;
					line-height: 39rpx;
				}

				.text_21 {
					width: 104rpx;
					height: 21rpx;
					overflow-wrap: break-word;
					color: rgba(255, 15, 15, 1);
					font-size: 22rpx;
					font-weight: 700;
					text-align: left;
					white-space: nowrap;
					line-height: 39rpx;
				}

				.text_22 {
					width: 86rpx;
					height: 18rpx;
					overflow-wrap: break-word;
					color: rgba(153, 153, 153, 1);
					font-size: 22rpx;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 39rpx;
					// margin: 447rpx 0 0 -197rpx;
				}

				.text_23 {
					width: 81rpx;
					height: 22rpx;
					overflow-wrap: break-word;
					color: rgba(153, 153, 153, 1);
					font-size: 22rpx;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 34rpx;
					// margin: 443rpx 0 0 30rpx;
				}

				.group_22 {
					background-color: rgba(255, 255, 255, 1.000000);
					border-radius: 10rpx;
					width: 335rpx;
					height: 474rpx;
					margin-top: 20rpx;
					flex-direction: row;
					display: flex;
				}

				.image-text_36 {
					width: 335rpx;
					height: 465rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}

				.image_42 {
					width: 335rpx;
					height: 400rpx;
				}

				.text-group_21 {
					width: 106rpx;
					height: 56rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin: 9rpx 0 0 14rpx;
				}

				.text_24 {
					width: 106rpx;
					height: 26rpx;
					overflow-wrap: break-word;
					color: rgba(51, 51, 51, 1);
					font-size: 26rpx;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 34rpx;
				}

				.text-wrapper_8 {
					width: 104rpx;
					height: 21rpx;
					overflow-wrap: break-word;
					font-weight: 700;
					text-align: left;
					white-space: nowrap;
					line-height: 39rpx;
					margin: 9rpx 0 0 1rpx;
				}

				.text_25 {
					width: 104rpx;
					height: 21rpx;
					overflow-wrap: break-word;
					color: rgba(255, 15, 15, 1);
					font-size: 28rpx;
					font-weight: 700;
					text-align: left;
					white-space: nowrap;
					line-height: 39rpx;
				}

				.text_26 {
					width: 104rpx;
					height: 21rpx;
					overflow-wrap: break-word;
					color: rgba(255, 15, 15, 1);
					font-size: 28rpx;
					font-weight: 700;
					text-align: left;
					white-space: nowrap;
					line-height: 39rpx;
				}

				.text_27 {
					width: 104rpx;
					height: 21rpx;
					overflow-wrap: break-word;
					color: rgba(255, 15, 15, 1);
					font-size: 22rpx;
					font-weight: 700;
					text-align: left;
					white-space: nowrap;
					line-height: 39rpx;
				}

				.text_28 {
					width: 86rpx;
					height: 18rpx;
					overflow-wrap: break-word;
					color: rgba(153, 153, 153, 1);
					font-size: 22rpx;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 39rpx;
					margin: 447rpx 0 0 -197rpx;
				}

				.text_29 {
					width: 81rpx;
					height: 21rpx;
					overflow-wrap: break-word;
					color: rgba(153, 153, 153, 1);
					font-size: 22rpx;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 34rpx;
					margin: 446rpx 1rpx 0 29rpx;
				}

				.image_43 {
					width: 335rpx;
					height: 197rpx;
					margin-top: 20rpx;
				}

			}
		}



	}
</style>